<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.kinlon.work/js/jquery-3.2.1.min.js"></script>
    <script src="https://cdn.kinlon.work/js/echarts.min.js"></script>
    <style>

        html,body{
            height: 100%;
        }

        .main{
            width:100%;
            height: 100%;
        }

        .this_charts{
            width: 45%;
            height: 50%;
            display:inline-block;
            padding:1.8%;
            margin:0.2%;
            border: 4px solid #cececb;
        }
    </style>

</head>
<body>
<div class="main">
    <!--创建一个容器-->
    <div class="this_charts" id="in_num" style=""></div>
    <div class="this_charts" id="out_num"></div>
    <div class="this_charts" id="damages_num"></div>
    <div class="this_charts" id="transfer_num"></div>
</div>

</body>
</html>
<script>
    //定义jquery文档加载事件
    $(function(){
        //执行饼图函数
        in_num();
        out_num();
        damages_num();
        transfer_num();
    })
    //饼图 函数
    function in_num() {
        //发送ajax请求
        $.ajax({
            url:"/chart/in_num_data",
            type:"get",
            // data:{"time":"2020-04-13"},
            dataType:"json",
            success:function(data){
                console.log(data)
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('in_num'));

                // 指定图表的配置项和数据
                var option = {
                    title : {
                        text: '入库数据'
                    },
                        xAxis: {
                        type: 'category',
                        data: data.x
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: data.y,
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        })
    }

    function out_num() {
        //发送ajax请求
        $.ajax({
            url:"/chart/out_num_data",
            type:"get",
            // data:{"time":"2020-04-13"},
            dataType:"json",
            success:function(data){
                console.log(data)
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('out_num'));

                // 指定图表的配置项和数据
                var option = {
                    color: 'rgb(253,77,0)',
                    title : {
                        text: '出库数据'
                    },
                    xAxis: {
                        type: 'category',
                        data: data.x
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: data.y,
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        })
    }

    function damages_num() {
        //发送ajax请求
        $.ajax({
            url:"/chart/damages_num_data",
            type:"get",
            // data:{"time":"2020-04-13"},
            dataType:"json",
            success:function(data){
                console.log(data)
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('damages_num'));

                // 指定图表的配置项和数据
                var option = {
                    color: 'rgb(255,200,0)',
                    title : {
                        text: '报损数据'
                    },
                    xAxis: {
                        type: 'category',
                        data: data.x
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: data.y,
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba( 255,140,0,0.2)',
                        }
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        })
    }

    function transfer_num() {
        //发送ajax请求
        $.ajax({
            url:"/chart/transfer_num_data",
            type:"get",
            // data:{"time":"2020-04-13"},
            dataType:"json",
            success:function(data){
                console.log(data)
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('transfer_num'));

                // 指定图表的配置项和数据
                var option = {
                    color: 'rgb(1,59,1)',
                    title : {
                        text: '转运数据'
                    },
                    xAxis: {
                        type: 'category',
                        data: data.x
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: data.y,
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        })
    }
</script>